<!-- jPages -->
<script type="text/javascript">
$(function(){
  /* initiate the plugin */
  $("div.pag-holder").jPages({
      containerID  : "pag-itemContainer",
      perPage      : 5,  /* num of items per page */
      startPage    : 1,
      startRange   : 1,
      midRange     : 3,
      endRange     : 1
  });
});
</script>
<style>
.markdown-body {
	box-sizing: border-box;
	min-width: 200px;
	max-width: 980px;
	margin: 0 auto;
	padding: 45px;
}

@media (max-width: 767px) {
	.markdown-body {
		padding: 15px;
	}
}
</style>

<!-- 博客分类大标题 -->
<div class="row">
    <div class="col-lg-12 text-center">
        <div class="navy-line"></div>
        {% assign category = page.url | remove:'/' | capitalize %}
        {% if category == 'Html' %}
        {% assign category = category | upcase %}
        {% endif %}
        <h1>{{ category }}</h1>
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight blog">
    <div class="row">
        <ul id="pag-itemContainer" style="list-style:none;">
            {% assign counter = 0 %}
            {% for post in site.categories[category] %}
            {% assign counter = counter | plus: 1 %}
            <li>
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="ibox">
						<!-- <div class="markdown-body"> -->
                        <div class="ibox-content">
                            <a href="{{ post.url | prepend: site.baseurl }}" class="btn-link">
                                <h2>{{ post.title }}</h2>
                            </a>
                            <div class="small m-b-xs">
                                <strong>{{ site.author.name }}</strong> <span class="text-muted"><i class="fa fa-clock-o"></i> {{ post.date | date: "%-d %b %Y" }}</span>
                            </div>
                            <p>
                                {{ post.content | strip_html | truncate:100 }}
                            </p>
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 style="display: inline;">Tags:</h5>
                                    {% for tag in post.tags %}
                                    <button class="btn btn-white btn-xs">{{ tag }}</button>
                                    {% endfor %}
                                </div>
                                <div class="col-md-6">
                                    <div class="small text-right">
                                        <div>
                                            {% if site.disqus %}
                                            <i class="fa fa-comments-o"> </i> <span class="disqus-comment-count" data-disqus-url="{{ site.url }}{{ post.url }}">0</span> comments
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% include pagination.html %}
    </div>
</div>
